<template>
  <div class='color-selector'>
    <q-btn dense>
      <q-avatar size="42px" rounded>
        <img src="phaser/editicon_880x881.png" width="48px" />
        <q-menu persistent auto-close>
          <q-list style="min-width: 100px">
            <q-item clickable v-for="(colorkey, colorvalue) in colors" :key='colorvalue' @click='changeColor(colorkey)'>
              <q-item-section>
                <div class='color' :style='{ background: colorkey }'>
                  <q-tooltip>
                    {{ colorvalue }}
                  </q-tooltip>
                </div>
              </q-item-section>
            </q-item>
          </q-list>
        </q-menu>
      </q-avatar>
    </q-btn>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { usePhaserStore } from '../stores/phaserStore';
import { useUiStore } from '../stores/UI';

import { mapState, mapActions } from 'pinia';
export default defineComponent({
  name: 'colorSelector',
  data() {
    return {
      colors: {
        red: '#ff0000',
        green: '#00ff00',
        blue: '#0000ff',
        tomato: '#f36',
        darkcyan: '#008b8b',
        darkgoldenrod: '#b8860b',
        darkgrey: '#a9a9a9',
        darkgreen: '#006400',
        darkkhaki: '#bdb76b',
        darkmagenta: '#8b008b',
        darkolivegreen: '#556b2f',
        darkorange: '#ff8c00',
        darkorchid: '#9932cc',
        darkred: '#8b0000',
        darksalmon: '#e9967a',
        darkseagreen: '#8fbc8f',
        darkslateblue: '#483d8b',
        darkslategrey: '#2f4f4f',
        darkturquoise: '#00ced1',
        darkviolet: '#9400d3',
        deeppink: '#ff1493',
        deepskyblue: '#00bfff',
        dimgrey: '#696969',
        dodgerblue: '#1e90ff',
        firebrick: '#b22222',
        floralwhite: '#fffaf0',
        forestgreen: '#228b22',
        fuchsia: '#ff00ff',
        gainsboro: '#dcdcdc',
        ghostwhite: '#f8f8ff',
        gold: '#ffd700',
        goldenrod: '#daa520',
        grey: '#808080',
        greenyellow: '#adff2f',
        honeydew: '#f0fff0',
        hotpink: '#ff69b4',
        indianred: '#cd5c5c',
        indigo: '#4b0082',
        ivory: '#fffff0',
        khaki: '#f0e68c',
        lavender: '#e6e6fa',
        lavenderblush: '#fff0f5',
        lawngreen: '#7cfc00',
        lemonchiffon: '#fffacd',
        lightblue: '#add8e6',
        lightcoral: '#f08080',
        lightcyan: '#e0ffff',
        lightgoldenrodyellow: '#fafad2'


      }

    };
  },
  computed: {
    ...mapState(usePhaserStore, ['endlessKanvasScene']),
    ...mapState(useUiStore, { uiColor: 'color' }),
  },
  methods: {
    ...mapActions(useUiStore, { setColor: 'setColor' }),
    changeColor(color) {

      this.setColor(color);
      this.endlessKanvasScene.cameras.main.setBackgroundColor(this.uiColor);
    }
  }
});
</script>
<style scoped>
.color-selector {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 1px;
  pointer-events: initial;
  height: 100%;

}

.color {
  width: 8px;
  height: 100%;
  cursor: pointer;
}
</style>
